Over the last decade, the World Wide Web (WWW) has grown from simple graphics and hyperlinks into rich and complex multimedia sites and presentations. Hypertext Markup Language (HTML) is a tag-based markup language that describes the visible format of data. It was one of the first and remains a widely used computer language used to build Web pages and Websites. Web designers typically use Web development environments that include HTML code view editing, in which the designer may write out the HTML script; and/or graphical design view editing, in which the development environment displays the graphical rendering of the HTML as it will appear in a Web browser and allows the designer to graphically manipulate the Web page under design. Using visual editing typically allows the designer to produce a more-refined and visually pleasing result. Web development environments that include such graphical-based editing includes MACROMEDIA INC.'s DREAMWEAVER™, ADOBE SYSTEMS, INC.'s GO LIVE™, MICROSOFT CORPORATION's FRONTPAGE™, and the like. Some Web editing environments, such as DREAMWEAVER™, include both graphical-based and text-based editing views that may be simultaneously displayed to the user and automatically show changes to the other view as a user makes edits in the opposite view.
As technology has advanced, there has been a growth in the use and development of rich Internet applications (RIAs), which are generally Internet-based interactive multimedia applications that operate more-complex logic on the accessing client computer. Many RIA use an interactive multimedia application environment (iMAE), such as MACROMEDIA INC.'s FLASH™ or the like, as the platform to develop the RIA that will be executed using an interactive multimedia runtime container (iMRC), such as MACROMEDIA INC.'s FLASH PLAYER™, running on the accessing client. Application development environments (ADE) have been developed specifically for RIA applications. For example, MACROMEDIA INC.'s FLEX™ server and FLEX BUILDER™ integrated development environment (IDE), are used to design and develop RIA that result in small web file (SWF) formatted files that are natively run using the FLASH PLAYER™.
In both Web pages and RIA, the visual interface is an integral part of the presentation of the information and the user experience. Therefore, the design of the interface is an important part of the overall design of the Web page and/or RIA interface. Graphical interfaces are usually developed by segregating the display canvas into a series of layout blocks or divisions. These blocks are defined in layout elements, such as tables, lists, divisions (DIV), and the like, in HTML, and other block elements, such as HBoxes, VBoxes, and the like in RIA, such as those designed in FLEX BUILDER™. Layout blocks may be nested or imbedded into other layout blocks in order to create a specific design of the interface. As a part of the design process, designers and developers benefit by easily viewing the basic block layout of the interface. However, current ADEs generally provide only an outline of the various layout blocks on the design view canvas. These outlines, while instructive of the division of the interface, do not give the designer much information concerning how the layout blocks are actually set up. For example, the grid of outlines does not give the designer any information on whether the layout blocks are nested or adjacent or imbedded, or the like, or whether the divisions are part of the same block or are, themselves, a different block or blocks. Moreover, within each block, the current outlining features do not instruct the designers about the size or appearance of key parameters, such as the box model parameters supporting the margin, border, padding areas, and the like. Thus, the designer is not able to easily see how the interface is laid out.